import {EllipsisOutlined, PlusOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ProTable} from '@ant-design/pro-components';
import {Button, Dropdown, Space, Tag, Image} from 'antd';
import {useRef, useState} from 'react';
import request from 'umi-request';

import Edit from "./Edit";
import Detail from "./Detail";
import Bind from "./Bind";
import Settings from "./Settings";
import Add from "./Add";
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Form, message} from 'antd';
import {chatterList, deleteModel, modelList, updateModelStatus, updateAccountStatus} from "@/services/chatter";
import {Popconfirm} from "antd/lib";

export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

var actionRef = null;
type DataSourceType = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    chatterAccount: string,
    approvalStatus: number,
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};
const confirm = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.success('Click on Yes');
};

const cancel = (e: React.MouseEvent<HTMLElement>) => {
};

var popNo = 0;
const columns: ProColumns<DataSourceType>[] = [
    {
        title: 'MID',
        dataIndex: 'modelCode',
        copyable: true,
        ellipsis: true,
        hideInSearch: true,
        readonly: true
    },
    {
        title: 'MID',
        dataIndex: 'modelCode',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
    },
    {
        title: 'Nick Name',
        dataIndex: 'name',
        copyable: true,
        ellipsis: true,
        readonly: true,
        hideInSearch: true,
        formItemProps: {
            rules: [
                {
                    // required: true,
                    message: '此项为必填项',
                },
            ],
        },
    },
    {
        title: 'NickName',
        dataIndex: 'name',
        copyable: true,
        ellipsis: true,
        hideInTable: true
    },
    {
        title: 'CID',
        dataIndex: 'chatterAccount',
        copyable: true,
        ellipsis: true,
        readonly: true,
        hideInSearch: true
    },
    {
        title: 'CID',
        dataIndex: 'chatterAccount',
        copyable: true,
        ellipsis: true,
        hideInTable: true,
    },
    {
        title: 'Avatar',
        dataIndex: 'avatarUrl',
        ellipsis: true,
        hideInSearch: true,
        readonly: true,
        render: (_, record) => (
            <Image.PreviewGroup
                items={[
                    record.avatarUrl,
                ]}
            >
                <Image
                    width={50}
                    src={record.avatarUrl}
                />
            </Image.PreviewGroup>
        ),
    },
    {
        disable: true,
        title: 'Gender',
        dataIndex: 'gender',
        ellipsis: true,
        hideInSearch: true,
        valueType: 'select',
        readonly: true,
        valueEnum: {
            0: {text: 'unknow'},
            1: {
                text: 'male',
                status: 'Success',
            },
            2: {
                text: 'female',
                status: 'Error',
            }
        },
    },
    // {
    //     title: 'Photos',
    //     dataIndex: 'avatarUrl2',
    //     ellipsis: true,
    //     hideInSearch: true,
    //     render: (_, record) => (
    //         <Image.PreviewGroup
    //             items={record.images}
    //         >
    //             <Image
    //                 width={50}
    //                 src={record.images[0]}
    //             />
    //         </Image.PreviewGroup>
    //     ),
    // },

    {
        title: 'Chatter Name',
        dataIndex: 'chatterName',
        ellipsis: true,
        readonly: true,
        hideInSearch: true
    },
    {
        title: 'Chatter Name',
        dataIndex: 'chatterName',
        ellipsis: true,
        hideInTable: true
    },

    {
        title: 'Assigned Chatter',
        dataIndex: 'assignedChatter',
        ellipsis: true,
        hideInTable: true,
        valueType: 'select',
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'Yes',
                status: 'Success',
            },
            2: {
                text: 'No',
                status: 'Error',
            }
        },
    },
    {
        title: 'Working Time',
        dataIndex: 'onlineTime',
        ellipsis: true,
        readonly: true,
        hideInSearch: true
    },
    {
        title: 'Account Status',
        key:'Account Status',
        dataIndex: 'status',
        valueType: 'select',
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'Disabled',
                status: 'warning',
            },
            2: {
                text: 'Enabled',
                status: 'Success',
            }
        },
    },
    {
        title: 'Online',
        dataIndex: 'onlineStatus',
        ellipsis: true,
        valueType: 'select',
        hideInSearch: true,
        readonly: true,
        valueEnum: {
            99: {text: 'All'},
            1: {
                text: 'Online',
                status: 'Online',
            },
            2: {
                text: 'Offline',
                status: 'Offline',
            }
        },
    },
    {
        title: 'Approval Status',
        dataIndex: 'approvalStatus',
        ellipsis: true,
        valueType: 'select',
        readonly: true,
        hideInSearch: true,
        valueEnum: {
            null: {text: 'all'},
            0: {
                text: 'Waiting',
                status: 'Waiting',
            },
            1: {
                text: 'Pass',
                status: 'Pass'
            },
            2: {
                text: 'Reject',
                status: 'Reject'
            }
        }
    },
    {
        title: 'Approval Status',
        dataIndex: 'approvalStatus',
        ellipsis: true,
        valueType: 'select',
        hideInTable: true,
        valueEnum: {
            99: {text: 'ALL'},
            0: {
                text: 'Waiting',
                status: 'Waiting',
            },
            1: {
                text: 'Pass',
                status: 'Pass'
            },
            2: {
                text: 'Reject',
                status: 'Reject'
            }
        }
    },
    {
        title: 'PPV',
        dataIndex: 'hasPrivateType',
        ellipsis: true,
        valueType: 'select',
        hideInTable: true,
        valueEnum: {
            99: {text: 'ALL'},
            0: {
                text: 'NONE',
                status: 'NONE',
            },
            1: {
                text: 'PPV',
                status: 'PPV'
            }
        }
    },
    {
        title: 'PPV2',
        dataIndex: 'hasPrivateType',
        ellipsis: true,
        valueType: 'select',
        hideInTable: true,
        hideInSearch: true,
        valueEnum: {
            99: {text: 'ALL'},
            0: {
                text: 'NONE',
                status: 'NONE',
            },
            1: {
                text: 'PPV',
                status: 'PPV'
            }
        }
    },
    {
        disable: true,
        title: 'Last Online Time',
        dataIndex: 'lastOnlineTime',
        valueType: 'date',
        readonly: true,
        search: false,
    },
    {
        title: 'Create Date',
        key: 'createDt',
        dataIndex: 'createDt',
        valueType: 'date',
        sorter: true,
        readonly: true,
        hideInSearch: true,
    },
    {
        title: 'Actions',
        valueType: 'option',
        key: 'option',
        render: (text, record, _, action) => [
            <a
                key="editable"
                onClick={() => {
                    action?.startEditable?.(record.modelCode);
                }}
            >
                Edit
            </a>,
            <Edit record={record} reloadTable={() => {
                actionRef.current?.reload()
            }} />,


            // <Popconfirm
            //     // disabled={popNo!=1}
            //     title="Delete the Model"
            //     description="Are you sure to delete this Model?"
            //     onConfirm={(e) => {
            //         var params = {modelCode: record.modelCode}
            //         deleteModel(params).then(res => {
            //             message.success("Success");
            //             actionRef.current?.reload()
            //         })
            //     }}
            //     onCancel={cancel}
            //     okText="Yes"
            //     cancelText="No"
            // >
            //     <a danger>Delete</a>
            // </Popconfirm>,


            // <Popconfirm
            //     title="Update the status"
            //     description="Are you sure to Update status?"
            //     onConfirm={(e) => {
            //         var params = {modelCode: record.modelCode, targetStatus: record.status == 1 ? 2 : 1}
            //         updateModelStatus(params).then(res => {
            //             message.success("Success");
            //             actionRef.current?.reload()
            //         })
            //     }}
            //     onCancel={cancel}
            //     okText="Yes"
            //     cancelText="No"
            // >
            //     <Button type={"primary"}>{record.status == 2 ? "OffLine" : "online"}</Button>
            // </Popconfirm>
            // <Detail/>,
            // <Bind/>,
            // <Settings/>
        ],
    },
    // {
    //     title: 'Review',
    //     valueType: 'option',
    //     key: 'option2',
    //     render: (text, record, _, action) => [
    //         <Popconfirm
    //             title="Update the status"
    //             description="Are you sure to Update status?"
    //             onConfirm={(e) => {
    //                 var params = {modelCode: record.modelCode, targetStatus: record.status == 1 ? 2 : 1}
    //                 updateModelStatus(params).then(res => {
    //                     message.success("Success");
    //                     actionRef.current?.reload()
    //                 })
    //             }}
    //             onCancel={cancel}
    //             okText="Yes"
    //             cancelText="No"
    //         >
    //             <Button type={"primary"}>{record.status == 2 ? "OffLine" : "online"}</Button>
    //         </Popconfirm>
    //         // <Detail/>,
    //         // <Bind/>,
    //         // <Settings/>
    //     ],
    // },
];

export default () => {
    actionRef = useRef<ActionType>();
    const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
    const [totalCnt,setTotalCnt] = useState(10);
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
    return (
        <div>

            <ProTable<DataSourceType>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params) => {
                    let response = await modelList(params);
                    setTotalCnt(response.totalCnt)
                    return {
                        data: response.list == null ? [] : response.list
                    };
                }}
                rowKey="modelCode"
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    showSizeChanger: true,
                    total:totalCnt,
                    onChange: (page) => console.log(page),
                }}
                dateFormatter="string"
                headerTitle="Models"

                onChange={setDataSource}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        await updateAccountStatus(data).then((res) => {
                            message.success("Success");
                            actionRef.current?.reload()
                        });
                    },
                    onDelete: async (rowKey, data, row) => {
                        let modelCode = {modelCode: data.modelCode}
                        await deleteModel(modelCode).then((res) => {
                            message.success("Success");
                            actionRef.current?.reload()
                        });

                    },
                    onChange: setEditableRowKeys,
                }}


                toolBarRender={() => [
                    <Add reloadTable={() => {
                        actionRef.current?.reload()
                    }}/>
                ]}

            />
        </div>
    );
};